<template>
	<!-- 我的签到 -->
	<view class="signin">
		<view class="head">
			<view class="head1">
				<view class="left"></view>
				<view class="right">已打卡</view>
			</view>
			<view class="head2">
				<view class="left"></view>
				<view class="right">未打卡</view>
			</view>
		</view>
		<!-- 日历 -->
		<view class="class-sechedle">
			<view class="sec-1">
				<!-- <view class="sec-1-left">上一月</view> -->
				<view class="sec-1-mid">{{ today.year }} 年 {{ today.month }} 月</view>
				<!-- <view class="sec-1-left">下一月</view> -->
			</view>
			<view class="sec-2">
				<view class="sec2-item">MO</view>
				<view class="sec2-item">TU</view>
				<view class="sec2-item">WE</view>
				<view class="sec2-item">TH</view>
				<view class="sec2-item">FR</view>
				<view class="sec2-item">SA</view>
				<view class="sec2-item">SU</view>
			</view>
			<view class="sec-3">
				<view class="sec3-item" v-for="(item,index) in list" :key="index" @click="handleDateItem(item)">
					<view class="top" v-if="item.signList[0]" :class="item.signList[0].checkingStatus!=5 ? 'already' : 'no' "></view>
					<view class="itemnei" :class="item.signClass" :style="item.text==today.day ? 'color:#d70505' : '' ">{{ item.text }}</view>
					<view class="top" v-if="item.signList[1]" :class="item.signList[1].checkingStatus!=5 ? 'already' : 'no' "></view>
				</view>
			</view>
		</view>
		<view class="textarea" v-if="isSubmitApply">
			<textarea placeholder="请输入异常打卡原因" placeholder-style="color:#999;font-size:26rpx;" v-model="content"></textarea>
		</view>
		<view class="signin-btn" @click="attendance">
			<view>打卡</view>
			<view class="bottom">{{ time }}</view>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dayNum:30,
				today:{
					year:2021,
					week:'',
					month:1,
					day:''
				},
				list:[],
				time:'',// 签到按钮时间,
				address:'',
				latitude:'',
				longitude:'',
				content:'',// 申请内容
				isSubmitApply:false, // 是否提交申请
				id:'',
				todaySignIn:[],// 今天的签到shuzu，
				checkingDate:''
			}
		},
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url:'./HistorySignIn/HistorySignIn'
			})
		},
		onLoad() {
			let date = new Date()
			let week = date.getDay()
			switch(week){
				case(0):
				this.today.week = '星期天'
				break;
				case(1):
				this.today.week = '星期一'
				break;
				case(2):
				this.today.week = '星期二'
				break;
				case(3):
				this.today.week = '星期三'
				break;
				case(4):
				this.today.week = '星期四'
				break;
				case(5):
				this.today.week = '星期五'
				break;
				case(6):
				this.today.week = '星期六'
				break;
			}
			this.getClearad()
		},
		mounted() {
			this.getAddress()
			this.getCheckDate()
			this.getDictionaries()
			this.getDictionaries2()
		},
		onShow() {
			uni.showLoading()
			setTimeout(() => {
				this.getAttendanceRecord()
				uni.hideLoading()
			},1000)
			
		},
		methods:{
			// 点击 日期
			handleDateItem(date) {
				console.log(date)
			},
			getClearad() {
				let date = new Date()
				var year = date.getFullYear()
				var month = parseInt(date.getMonth())+1
				var d = date.getDate()
				this.today.year = year
				this.today.month = month
				this.today.day = d
				// 当月总天数
				var dayNum = new Date(year,month,0).getDate()
				this.dayNum = dayNum
				
				// 当月1号 星期几
				var day = new Date(`${month}/1/${year}`).getDay()
				
				for(let i = 1;i <= dayNum; i++) {
					if(day == 1) {
						this.list.push({
							text:i,
							signClass:'',
							signList:[]
						})
					} else if(day == 2) {
						this.list[0] = {
							text:0,
							signClass:'zero'
						}
						this.list.push({
							text:i,
							signClass:'',
							signList:[]
						})
					} else if(day == 3) {
						this.list[0] = {
							text:0,
							signClass:'zero'
						}
						this.list[1] = {
							text:0,
							signClass:'zero'
						}
						this.list.push({
							text:i,
							signClass:'',
							signList:[]
						})
					} else if(day == 4) {
						this.list[0] = {
							text:0,
							signClass:'zero'
						}
						this.list[1] = {
							text:0,
							signClass:'zero'
						}
						this.list[2] = {
							text:0,
							signClass:'zero'
						}
						this.list.push({
							text:i,
							signClass:'',
							signList:[]
						})
					} else if(day == 5) {
						this.list[0] = {
							text:0,
							signClass:'zero'
						}
						this.list[1] = {
							text:0,
							signClass:'zero'
						}
						this.list[2] = {
							text:0,
							signClass:'zero'
						}
						this.list[3] = {
							text:0,
							signClass:'zero'
						}
						this.list.push({
							text:i,
							signClass:'',
							signList:[]
						})
					} else if(day == 6) {
						this.list[0] = {
							text:0,
							signClass:'zero'
						}
						this.list[1] = {
							text:0,
							signClass:'zero'
						}
						this.list[2] = {
							text:0,
							signClass:'zero'
						}
						this.list[3] = {
							text:0,
							signClass:'zero'
						}
						this.list[4] = {
							text:0,
							signClass:'zero'
						}
						this.list.push({
							text:i,
							signClass:'',
							signList:[]
						})
					} else if(day == 7) {
						this.list[0] = {
							text:0,
							signClass:'zero'
						}
						this.list[1] = {
							text:0,
							signClass:'zero'
						}
						this.list[2] = {
							text:0,
							signClass:'zero'
						}
						this.list[3] = {
							text:0,
							signClass:'zero'
						}
						this.list[4] = {
							text:0,
							signClass:'zero'
						}
						this.list[5] = {
							text:0,
							signClass:'zero'
						}
						this.list.push({
							text:i,
							signClass:'',
							signList:[]
						})
					}
				}
			},
			// 打卡状态字典
			getDictionaries() {
				let params = {
					dictCode:'checking_status_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// 	"value": "1",
						// 	"text": "正常"
						// 	"value": "2",
						// 	"text": "迟到",
						// 	"value": "3",
						// 	"text": "补签"
						// 	"value": "4",
						// 	"text": "早退"
						// 	"value": "5",
						// 	"text": "未打卡"
						if(res.code == 200) {
							// res.result.forEach(item => {
							// 	// this.dictList.push({
							// 	// 	value:item.value,
							// 	// 	label:item.text
							// 	// })
							// })
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 打卡类型字典
			getDictionaries2() {
				let params = {
					dictCode:'checking_type_dict'
				}
				this.$u.api.dictionaries(params)
					.then(res => {
						// console.log(res)
						// "result": [{
						// 	"value": "1",
						// 	"text": "上班考勤",
						// 	"title": "上班考勤"
						// }, {
						// 	"value": "2",
						// 	"text": "下班考勤",
						// 	"title": "下班考勤"
						// }, {
						// 	"value": "3",
						// 	"text": "轨迹打卡",
						// 	"title": "轨迹打卡"
						// }],
						if(res.code == 200) {
							// res.result.forEach(item => {
							// 	// this.dictList.push({
							// 	// 	value:item.value,
							// 	// 	label:item.text
							// 	// })
							// })
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			
			// 考勤情况
			getAttendanceRecord() {
				let params = {
					date:''
				}
				this.$u.api.getAttendanceRecord()
					.then(res => {
						if(res.code == 200) {
							let data = res.result
							for(var key in data){
								var value = data[key]
								this.list.forEach(item => {
									if(key == item.text) {
										item.signList = value
									}
								})
							}
							// console.log(this.list)
							this.todaySignIn = data[this.today.day]
							console.log(this.todaySignIn)
							
							var t = this.today.year+'-'+this.today.month+'-'+this.today.day
							var t1 = t +' '+'12:00:00'
							var time2 = new Date(this.checkingDate.replace(/-/g,"\/"))
							var time1 = new Date(t1.replace(/-/g,"\/"))
							if(time2>time1) {
								//下午
								// 判断有没有打卡
								if(this.todaySignIn[1].checkingStatus == 5) {
									// 未打卡
									this.id = this.todaySignIn[1].id
									console.log(this.id)
								} else {
									// 已打卡
									this.id = ''
								}
							} else {
								//早上
								// 判断有没有打卡
								if(this.todaySignIn[1].checkingStatus == 5) {
									// 未打卡
									this.id = this.todaySignIn[0].id
									console.log(this.id)
								} else {
									// 已打卡
									this.id = ''
								}
							}
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			// 地址
			getAddress() {
				let self = this;
				uni.getLocation({
					type: 'wgs84',
					geocode: true,
					success(res) {
						console.log(res)
						self.longitude = res.longitude
						self.latitude = res.latitude
						self.address = res.address.province+res.address.city+res.address.district+res.address.street+res.address.streetNum
					},
					fail(err) {
						console.log(err)
						uni.showToast({
							title:'定位失败',
							icon:'none'
						})
					}
				})
			},
			// 签到时间
			getCheckDate() {
				setInterval(() => {
					    const date = new Date()
					    this.checkingDate = date.getFullYear()+'-'+('0'+(date.getMonth()+1).toString()).slice(-2)+'-'+date.getDate()+' '+('0'+date.getHours()).slice(-2)+':'+
						('0'+date.getMinutes()).slice(-2)+':'+('0'+date.getSeconds()).slice(-2)
						this.time = ('0'+date.getHours()).slice(-2)+':'+('0'+date.getMinutes()).slice(-2)+':'+('0'+date.getSeconds()).slice(-2)
				},1000)
			},
			// 签到
			attendance() {
				if(this.id == '') {
					return uni.showToast({
						title:'今日已打卡',
						icon:'none',
						duration:2000
					})
				}
				var t = this.today.year+'-'+this.today.month+'-'+this.today.day
				var t1 = t +' '+'12:00:00'
				var time2 = new Date(this.checkingDate.replace(/-/g,"\/"))
				var time1 = new Date(t1.replace(/-/g,"\/"))
				if(time2 > time1) {
					console.log('下午')
					// 下午
					let timeXia = new Date(this.checkingDate.replace(/-/g,"\/"))
					var tXia = t +' '+'18:00:00'
					var time3 = new Date(tXia.replace(/-/g,"\/"))
					if(timeXia < time3 && timeXia > time1) {
						console.log('异常打卡,下午早退')
						// 进入 异常打卡
						// 早退
						this.isSubmitApply = true
						if(this.content == '') {
							return this.$refs.uToast.show({
								title: '请输入早退原因',
								type: 'warning',
								duration:2500
							})
						}
					} else {
						console.log('下班正常打卡')
						// 下班正常打卡
					}
				} else {
					console.log('早上')
					// 早上
					let timeZao = new Date(this.checkingDate.replace(/-/g,"\/"))
					var tZao= t +' '+'9:00:00'
					var time4 = new Date(tZao.replace(/-/g,"\/"))
					if(timeZao > time4 && timeZao < time1){
						console.log('迟到打卡')
						// 迟到打卡
						this.isSubmitApply = true
						if(this.content == '') {
							return this.$refs.uToast.show({
								title: '请输入迟到原因',
								type: 'warning',
								duration:2500
							})
						}
					} else {
						console.log('未迟到正常打卡')
						// 未迟到正常打卡
					}
				}
				let params = {
					address:this.address,
					latitude:this.latitude,
					longitude:this.longitude,
					content:this.content,
					isSubmitApply:this.isSubmitApply,
					id:this.id
				}
				console.log(params)
				this.$u.api.attendance(params)
					.then(res => {
						console.log(res)
						if(res.code == 200) {
							this.getAttendanceRecord() // 刷新
							this.$refs.uToast.show({
								title: '打卡成功',
								type: 'success',
								duration:2000
							})
						}
					})
					.catch(err => {
						console.log(err)
						this.$refs.uToast.show({
							title: '打卡失败',
							type: 'error',
							duration:2000
						})
					})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.signin{
		background-color: #f5f6f7;
		min-height: 100vh;
		padding: 30rpx;
		.textarea{
			padding: 20rpx;
			background-color: #fff;
			width: 90%;
			margin: 40rpx auto;
			border-radius: 20rpx;
		}
		.signin-btn{
			margin: 100rpx auto 0;
			width: 180rpx;
			height: 180rpx;
			border-radius: 50%;
			color: #fff;
			background-color: #007AFF;
			display: flex;
			justify-content: center;
			align-items: center;
			font-size: 30rpx;
			box-shadow: 0 6px 6px #CCE6FF,0 0 6px #CCE6FF,0 0 6px #CCE6FF;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			.bottom{
				margin-top: 20rpx;
			}
		}
		.signin-btn:active{
			background-color: #CCE6FF;
		}
		.head{
			display: flex;
			justify-content: space-around;
			align-items: center;
			width: 100%;
			padding: 30rpx 20rpx;
			.head1{
				font-size: 27rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.left{
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #09BB07;
					margin-right: 20rpx;
				}
				.right{
					color: #09BB07;
				}
			}
			.head2{
				font-size: 27rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				.left{
					width: 10rpx;
					height: 10rpx;
					border-radius: 50%;
					background-color: #999;
					margin-right: 20rpx;
				}
				.right{
					color: #999;
				}
			}
			
		}
		.class-sechedle{
			width: 100%;
			min-height: 600rpx;
			background-color: #fff;
			border-radius: 60rpx;
			margin-top: 30rpx;
			box-shadow: 0 4px 4px #eee,0 0 4px #eee,0 0 4px #eee;
			.sec-1{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
				
				font-weight: 600;
				color: #fff;
				background-image: linear-gradient(to right,#6299e7,#007AFF);
				border-radius: 60rpx 60rpx 0 0;
				height: 90rpx;
				padding: 0 30rpx;
				.sec-1-left{
					font-size: 26rpx;
				}
				.sec-1-mid{
					width: 30%;
					font-size: 30rpx;
				}
			}
			.sec-2{
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 28rpx;
				font-weight: 600;
				color: #000;
				margin-top: 20rpx;
				padding: 20rpx;
				.sec2-item{}
			}
			.sec-3{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				flex-wrap: wrap;
				padding: 0 20rpx 20rpx 20rpx;
				.sec3-item{
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-direction: column;
					.already{
						background-color: #4CD964;
					}
					.no{
						background-color: #999;
					}
					.top{
						width: 10rpx;
						height:10rpx;
						border-radius: 50%;
					}
					.itemnei{
						width: 70%;
						height: 70%;
						// background-color: #f5be46;
						border-radius: 50%;
						display: flex;
						justify-content: center;
						align-items: center;
						color: #999;
					}
					width: 14.2%;
					height: 90rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: 50%;
					margin-top: 10rpx;
					
				}
			}
		}
	}
	.yessign{
		color: #fff !important;
		background-color: #f5be46 !important;
	}
	.nosign{
		color: #fff !important;
		background-color: #bfbfbf !important;
	}
	.zero{
		visibility: hidden;
	}
</style>
